<template>
  <div class=" home-article-card">
    <!-- <div class="extra-info">小明刚刚赞同了回答-刚刚</div> -->
    <div class="info">
      <div class="avatar">
        <img src="../assets/img.jpg" alt="">
      </div>
      <div class="name">小哈</div>
      <div class="profile">,hhahhfh</div>
    </div>
    <div class="title">巴西总统在谈到饥饿问题当场落泪，是为什么？</div>
    <div class="text-more">
      <div class="text small-hand" @click="goArticleDetail">
        他离任的时候，巴西经济强势增长，一颗第三世界的新星正冉冉升起。 他重新归来时，巴西已经彻底发展回了他来之前（巴西年GDP占世界比例） 你数数他的九根指头…
      </div>
      <!-- <div v-if="false" class="more">阅读全文<a-icon type="down" /></div> -->
    </div>
    <div class="small-hand op-btn" @click="goArticleDetail">
      <div class="agree" :class="isAgree ? 'active' : '' "><a-icon type="up" /> 赞同322</div>
      <div class="disagree" :class="isDisagree ? 'active' : '' "><a-icon type="down" /></div>
      <div class="comment marginR20"><a-icon type="wechat" />2条评论</div>
      <div class="share marginR20" :class="isShare ? 'active' : '' "><a-icon type="share-alt" />分享</div>
      <div class="collect marginR20" :class="isCollect ? 'active' : '' "><a-icon type="star" />收藏</div>
      <!-- <div class="like marginR20"><a-icon type="heart" />喜欢</div> -->
      <div class="report">
        <a-popover v-model="isClickEllipsis" trigger="click" placement="bottom">
          <div @click="hideEllipsis" slot="content">
            <span>举报</span>
          </div>
          <a-icon type="ellipsis" />
        </a-popover>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homeArticleCard',
  components: {

  },
  data(){
    return{
      isClickEllipsis:false,
      isAgree:false,
      isDisagree:false,
      isShare:false,
      isCollect:false
    }
  },
  methods:{
    clickEllipsis(){
      this.isClickEllipsis=true
    },
    hideEllipsis(){
      this.isClickEllipsis=false
    },
    goArticleDetail(){
      let url='/articleDetail'+`?articleId=1`
      window.open(url, '_blank');
    }
  }
}
</script>

<style scoped lang="less">
.home-article-card{
  padding: 16px 0;
  border-bottom: 1px solid #e0dede;
  background-color: white;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  .extra-info{
    color: #8590a6;
    margin-bottom: 6px;
    font-size: 16px;
  }
  .info{
    display: flex;
    .avatar{
      width: 24px;
      height: 24px;
      margin-right: 10px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .name{
      font-weight: 600;
    }
  }
  .title{
    font-weight: 800;
    font-size: 20px;
    margin: 20px 0;
  }
  .text-more{
    .more{

    }
  }
  .op-btn{
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 16px;
    i{
      font-size: 24px;
      margin-right: 10px;
    }
    .marginR20{
      margin-right: 20px;
    }
    .active{
      color: rgb(247, 98, 98);
    }
    .agree,.disagree{
      background-color: #afc5ee;
      color: #056de8;
      padding: 5px;
      border-radius: 5px;
      i{
        font-size: 16px;
        margin-right: 0;
      }
    }
    .disagree{
      margin:0 30px 0 10px;
    }
  }
}
.home-article-card:last-of-type{
  margin-bottom: 0;
}
</style>
